<script setup>
import { provide, shallowRef, ref} from "vue";
import BaseButton from "../ui/BaseButton.vue";
import BaseCard from "../ui/BaseCard.vue";
import StoredResource from "./StoredResource.vue";
import AddResource from "./AddResource.vue";

const selectedTab = shallowRef(StoredResource);

const setSelectedTab = function (tab) {
  selectedTab.value = tab;
};

const storeResources = ref([
  {
    id: "official-guide",
    title: "Officail Guide",
    description: "The official Vue.js documentation.",
    link: "https://vuejs.org",
  },
  {
    id: "google",
    title: "Google",
    description: "Learn to google.",
    link: "https://google.com",
  },
]);

const addResource = function (title, description, link) {
  const newResource = {
    id: new Date().toISOString(),
    title: title,
    description: description,
    link: link,
  };

  storeResources.value.unshift(newResource);
  selectedTab.value = StoredResource;
};

const removeResource = function (id) {
  const resIndex = storeResources.value.findIndex((res) => res.id === id);
  storeResources.value.splice(resIndex, 1);
  console.log(storeResources);
};

provide("resources", storeResources);
provide("addResource", addResource);
provide("removeResource", removeResource);
</script>

<template>
  <BaseCard>
    <BaseButton @click="setSelectedTab(StoredResource)"
      >Stored Resources</BaseButton
    >
    <BaseButton @click="setSelectedTab(AddResource)">Add Resource</BaseButton>
  </BaseCard>
  <KeepAlive> </KeepAlive>
  <component :is="selectedTab"></component>
</template>
